import React, { Component } from 'react'
import { View, Text, Slider, StyleSheet, ScrollView, TouchableWithoutFeedback } from 'react-native'
import MyIcon from '../../../../utils/MyIcon'

const styles = StyleSheet.create({
  volumnBar: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  volumnIcon: {
    paddingHorizontal: 18
  },
  lyric: {
    paddingVertical: 14
  },
  lyricText: {
    color: '#a4a9ab',
    fontSize: 16,
    textAlign: 'center'
  },
  lyricActive: {
    color: '#f9f9f9'
  }
})

export default class Lyrics extends Component {
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.props.onClick}>
        <View style={{flexDirection: 'column', flex: 1}}>
          <View style={styles.volumnBar}>
            <View style={styles.volumnIcon}>
              <MyIcon name="play" size={18} color="#e9e9e9" />
            </View>
            <Slider style={{flex: 1}} minimumTrackTintColor="#f5f5f5" thumbTintColor="#f5f5f5" maximumTrackTintColor="#525657"/>
          </View>
          <ScrollView style={{flex: 1}}>
            <View style={styles.lyric}>
              <Text style={{...styles.lyricText}}>让音乐代替话语声</Text>
            </View>
            <View style={styles.lyric}>
              <Text style={{...styles.lyricText, ...styles.lyricActive}}>此时无声胜有声</Text>
            </View>
          </ScrollView>
        </View>
      </TouchableWithoutFeedback>
    )
  }
}